<template>
	<div class="todo">
		<!-- 传递函数给子组件，以便子组件调用传参 -->
		<todo-add :addItem="addItem"></todo-add>
		<!-- 传递todo项给子组件渲染 -->
		<todo-list :itemList="items"
		:delItem="delItem"></todo-list>
	</div>
</template>

<script>
	import TodoAdd from "./components/TodoAdd.vue"
	import TodoList from "./components/TodoList.vue"

	export default {
		components: {
			TodoAdd,
			TodoList
		},
		data() {
			return {
				items: ["上课", "吃饭", "睡觉","去郊游"],
			}
		},
		methods:{
			addItem(item){
				this.items.push(item);
			},
			delItem(i){
				this.items.splice(i,1);
			}
		}
	}
</script>

<style>
</style>
